<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="inc/layout"
>
<head>
    <meta charset="UTF-8"/>

    <title>首页</title>

</head>
<body>
<div class="container" layout:fragment="content">
    <div class="row">
        <div class="col-sm-12" style="height: 80px">
            <form class="form-inline text-right" action="" method="get">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">课程名</div>
                        <input type="text" class="form-control" name="name" th:value="${name}" placeholder="hibernate"/>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-2">
            <div class=" panel panel-default">
                <div class="panel-heading "><i class="fa fa-book"></i>最新笔记</div>
                <div th:each="n:${noteBooks}" style="margin: 10px 5px">
                    <a th:href="@{'/showNoteBook/'+${n.id}}">
                        <img th:src="${n.img}" class="img-thumbnail" width="30%" onerror="this.src='/img/noteBook/default.jpg'"/>
                        <div th:text="${n.name}" style="float: right;width: 68%"></div>
                    </a>
                </div>


            </div>
        </div>
        <div class="col-sm-10" >

            <div class="col-sm-3" th:each="c:${coursePage.content}">
                <div class="thumbnail">

                    <a th:href="@{'/show/'+${c.id}}">
                    <img th:src="${c.img}"   onerror="this.src='/img/course/default.jpg'" />
                    </a>
                    <div  class="caption">
                        <div class="h3" th:text="${c.name}" ></div>
                        <span th:if="${c.courseTypes.size()==0}" class="mytip hidden-xs hidden-sm" style="margin-bottom: 10px;display: inline-block">未分类</span>
                        <span th:each="t:${c.courseTypes}" th:text="${t.name}" class="mytip hidden-xs hidden-sm" style="margin-bottom: 10px;display: inline-block"></span>
                        <a th:href="@{'/show/'+${c.id}}" class="btn btn-default pull-right" >查看</a>
                    </div>
                </div>
            </div>
            <div class="row" th:if="${coursePage.totalElements>0}">
                <div class="col-sm-10">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="am-pagination-first ">
                                <a th:href="@{/(page=1,name=${name})}" class="">第一页</a>
                            </li>
                            <li th:if="${coursePage.number > 0}" class="am-pagination-prev ">
                                <a th:href="@{/(page=${coursePage.number},name=${name})}" class="">上一页</a>
                            </li>
                            <li th:each="i : ${#numbers.sequence(1, coursePage.totalPages)}"
                                th:classappend="${(coursePage.number + 1) eq i} ? 'active' : ''">
                                <a th:href="@{/(page=${i},name=${name})}"
                                   th:text="${i}" class="">1</a>
                            </li>
                            <li th:unless="${coursePage.number + 1 == coursePage.totalPages}"
                                class="am-pagination-next ">
                                <a th:href="@{/(page=${coursePage.number} + 2,name=${name})}" class="">下一页</a>
                            </li>
                            <li class="am-pagination-last ">
                                <a th:href="@{/(page=${coursePage.totalPages},name=${name})}" class="">最末页</a>
                            </li>
                            <li class="am-pagination-last ">
                                <a th:text="'共 '+${coursePage.totalElements}+' 条记录'"></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
</html>